<template>
  <div class="login-page" :style="{minHeight:docHeight}">
    <el-header></el-header>
    <div class="container clearfix" style="height:80%;position: relative; z-index: 2;">
      <div class="login-main" >
        <el-tabs class="form-wrapper" v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="帐号密码登录" name="password">
            <form class=" focus-effect" v-if="activeName === 'password'">
              <div class="form-group lgtl-wrapper clearfix">
                <!-- <h2 class="login-tl">帐号密码登录</h2> -->
                <!-- <router-link to="/user/register" class="normal-color rg-new-link">注册新用户</router-link> -->
              </div>
              <div class="form-group clearfix pdt-10" :class="{'danger': validateList['account'] === false }">
                <i class="user-reg-ico input-embed-ico">
                  <icon name="user-o" scale="1.1"></icon>
                </i>
                <el-popover ref="popover2" :value="validateList['account'] === false" placement="left" width="200" trigger="manual"
                      content="请输入正确的帐号（手机号）">
                </el-popover>
                <el-input v-popover:popover2 @change="isValid('phone', user.account, 'account')" v-model="user.account"
                  ref="account" rule="phone" class="usr-input" placeholder="手机号"></el-input>
              </div>
              <div class="form-group clearfix pdt-10"
              :class="{'danger': validateList['password'] === false }">
                <i class="pwd-lock-ico input-embed-ico">
                    <icon name="lock" scale="1.2"></icon>
                </i>
                <el-popover ref="popover1" :value="validateList['password'] === false" placement="left" width="200" trigger="manual"
                      content="请输入六位字符以上的有效密码">
                </el-popover>
                <el-input @change="isValid(pwdRule, user.password, 'password')" ref="password" :rule="pwdRule"
                  v-popover:popover1 type="password" v-model="user.password" class="pwd-input" placeholder="密码"></el-input>
              </div>
              <!-- <div class="form-group clearfix">
                <router-link to="/user/fogot" class="fg-pwd">忘记登录密码</router-link>
              </div> -->
              <div class="form-group clearfix pdt-10">
                <el-button type="primary" class="lg-btn" @mouseup.native="doLogin()">立即登录</el-button>
              </div>
          </form>
        </el-tab-pane>
        <el-tab-pane label="验证码登录" name="verifycode">
          <form class=" focus-effect" v-if="activeName === 'verifycode'">
            <div class="form-group lgtl-wrapper clearfix">
              <!-- <h2 class="login-tl">帐号密码登录</h2> -->
              <!-- <router-link to="/user/register" class="normal-color rg-new-link">注册新用户</router-link> -->
            </div>
            <div class="form-group clearfix pdt-10" :class="{'danger': validateList['account'] === false }">
              <i class="user-reg-ico input-embed-ico">
                <icon name="user-o" scale="1.1"></icon>
              </i>
              <el-popover ref="popover2" :value="validateList['account'] === false" placement="left" width="200" trigger="manual"
                    content="请输入正确的帐号（手机号）">
              </el-popover>
              <el-input v-popover:popover2 @change="isValid('phone', user.account, 'account')" v-model="user.account"
                ref="account" rule="phone" class="usr-input" placeholder="手机号"></el-input>
            </div>
            <div class="form-group clearfix pdt-10"
            :class="{'danger': validateList['verifycode'] === false }">
              <i class="pwd-lock-ico input-embed-ico">
                  <icon name="lock" scale="1.2"></icon>
              </i>
              <el-popover ref="popover1" :value="validateList['verifycode'] === false" placement="left" width="200" trigger="manual"
                    content="请输入验证码">
              </el-popover>
              <el-input @change="isValid(verifycodeRule, user.verifycode, 'verifycode')" ref="verifycode" :rule="verifycodeRule"
                v-popover:popover1 type="text" v-model="user.verifycode" class="verifycodeInput pwd-input" placeholder="验证码"
                :class="{'verifycodeInputShot': finish === false}"></el-input>
              <el-button class="verfiy-code-trigger" v-if="finish === true" @click="send()">{{ verifycodeTip }}</el-button>
              <el-button class="verfiy-code-trigger verfiy-code-trigger-fixed" v-if="finish === false" disabled>({{ countDown }}s)后才能发送</el-button>
            </div>
            <!-- <div class="form-group clearfix">
              <router-link to="/user/fogot" class="fg-pwd">忘记登录密码</router-link>
            </div> -->
            <div class="form-group clearfix pdt-10">
              <el-button type="primary" class="lg-btn" @mouseup.native="doLogin()">立即登录</el-button>
            </div>
        </form>
        </el-tab-pane>
      </el-tabs>

    </div>
    </div>
    <div class="bg-block" :style="{minHeight:docHeight}">
      <div class="bg-img-wrap"><img v-lazy="bgimg" /></div>
      <h4 class="com-desc">国内首家智能早教CRM平台</h4>
      <ul class="com-map">
        <li class="com-map-link"><a>服务中心&nbsp;&nbsp;</a></li>
        <li class="com-map-link"><a>公司网站&nbsp;&nbsp;</a></li>
        <li class="com-map-link"><span>麦圈集团旗下网站：SCRM © 2016 粤 B2-20080224-16</span></li>
      </ul>
    </div>
    <SelectSite v-if="switchSite"></SelectSite>
  </div>
</template>

<style lang="scss">
    @import "../scss/index.scss";
    @import "../scss/mixins/input.scss";

    .com-desc {
      margin: 20px 0 4px;
    }
    .com-desc,.com-map {
      font-weight: normal;
      font-size: 12px;
      color: #a8a8a8;
    }

    .com-map{
      padding: 0;
      margin: 6px 0;
    }

    .com-map .com-map-link{
      display: inline-block;
    }

    .com-map-link a {
      color: #20a0ff;
      border-right: 1px solid grey;
      margin-right: 4px;
      line-height: 13px;
      height: 13px;
      display: inline-block;
    }

    .bg-img-wrap {
      height: 80%;
      overflow: hidden;
    }
    .bg-block {
      position: absolute;
      top: 56px;
      height: 100%;
      width: 100%;
      background-color: #E7E8EB;
      text-align: center;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    div.login-main {

        width: 380px;
        float: right;

        input {
          line-height: 24px;
        }

        .form-wrapper{
            margin-top:50px;
            background: #fff;
            border-radius: 3px;
            border:1px solid #e5e5e5;
            padding: 4px 0 20px;
            margin-right: 2rem;

        }

        .el-tabs__header {
          padding: 0 10px;
          margin-bottom: 6px;
        }

        .form-group  {
            padding-left:20px;
            padding-right:20px;
            position: relative;
        }

        .lgtl-wrapper{
            // border-bottom: 1px solid #e5e5e5;
            // margin-bottom:15px;

            & a{
                  text-decoration: none;
              }

            .login-tl{
                float: left;
                font-size: 16px;
                font-weight: bolder;
                margin: 0 0 -1px;
                padding:10px 0;
                border-bottom: 3px solid $color-primary;
            }

            .rg-new-link{
                float: right;
                font-size: 12px;
                padding:12px 0;
            }
        }

        .lg-btn{
            width: 100%;
            float: left;
        }

        .fg-pwd,.fg-pwd:focus,.fg-pwd:visited{
            font-size: 12px;
            text-decoration: none;
            color: #aaa;
            float: left;
            padding: 14px 0 14px;
        }

        .el-input{
            float: left;
        }

        .el-input__inner{
            padding-left: 30px;

            @include input-placeholder{
                color:#aaa;
                font-size:13px;
                line-height: 28px;
                letter-spacing:0;
            }
        }

        .verifycodeInput {
          width: 64%;
        }

        .verifycodeInputShot {
          width: 52%;
        }

        .verfiy-code-trigger {
          float: right;
        }

        .verfiy-code-trigger-fixed {
          width: 138px;
        }
    }
</style>

<script>
import SelectSite from 'components/SelectSite'
import Header from 'components/Header'
import { Button, Input, Col, Row, Popover, Tabs, TabPane } from 'element-ui'
import { doValid, isAllValid } from '../lib/validator'
import { mapActions, mapState } from 'vuex'
import { mapField } from '../lib/backend'

// 引入icon 开始
import Icon from 'vue-awesome/components/Icon.vue'
import 'vue-awesome/icons/user-o'
import 'vue-awesome/icons/lock'
// 引入icon 结束

export default {
  data () {
    return {
      docHeight: window.innerHeight + 'px',
      bgHeight: window.innerHeight * 0.8 + 'px',
      validateList: {},
      user: {},
      $notify: null,
      validate: false,
      submitList: {},
      activeName: 'password',
      pwdRule: /.{6,}/,
      verifycodeTip: '发送验证码',
      verifycodeRule: /.{1,}/,
      countDown: 60,
      finish: true,
      bgimg: 'http://oodoa7x5e.bkt.clouddn.com/login-bg1.png?1212'
    }
  },
  components: {
    Icon,
    SelectSite: SelectSite,
    [Button.name]: Button,
    [Header.name]: Header,
    [Input.name]: Input,
    [Col.name]: Col,
    [Row.name]: Row,
    [Popover.name]: Popover,
    [Tabs.name]: Tabs,
    [TabPane.name]: TabPane
  },
  beforeMount () {
    console.log('beforeMount')
    if ( this.loginUser && this.loginUser.id) {
      this.$router.push({name: 'home'})
    }
  },
  methods: {
    doValid: doValid,
    isValid (rule, value, id) {
      this.doValid(rule, value, id, this, this.validate)
    },
    isAllValid: isAllValid,
    send () {
      this.sendSmsCode({ mobile_num: this.user.account })
      this.finish = false
      this.cid = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown --
          if (this.countDown < 10) {
            this.countDown = '0' + this.countDown
          }
        } else {
          clearInterval(this.cid)
          this.finish = true
          this.countDown = 60
        }
      }, 1000)
    },
    showValid () {
    },
    handleClick () {
      if (this.activeName === 'password') {
        this.tmpverifycode = this.user.verifycode
        this.user.password = this.tmpPassword
        delete this.user.verifycode
      } else {
        this.tmpPassword = this.user.password
        this.user.verifycode = this.tmpverifycode
        delete this.user.password
      }
    },
    doLogin () {
      let isValid = true
      for (const name in this.$refs) {
        if (typeof this.$refs[name] !== 'undefined' && this.$refs[name].$el.getAttribute('rule')) {
          const value = this.user[name]
          let rule = this.$refs[name].$el.getAttribute('rule')
          rule = rule.indexOf('/') === -1 ? rule : new RegExp(rule.replace(/\//g, ''))
          const tmp = this.doValid(rule, value, name, this, false)
          if (tmp === false) {
            isValid = false
          }
        }
      }
      if (isValid === true) {
        this.login(mapField(this.user, {
          'account': 'mobile',
          'password': 'password',
          'verifycode': 'verifycode'
        })).then((data) => {
          if (data.errcode === 0) {
            console.log(data.errcode)
            this.showSwitchSite()
          }
        })
      }
      // this.validate = false
    },
    ...mapActions({
      login: 'login',
      showSwitchSite: 'showSwitchSite',
      hideSwitchSite: 'hideSwitchSite',
      sendSmsCode: 'sendSmsCode'
    })
  },
  mounted () {
    // this.$notify = this.notify({
    //   type: 'success',
    //   title: '成功',
    //   message: '这是一条成功的提示消息',
    //   offset: 0
    // })
  },
  computed: {
    ...mapState({
      loginUser: state => state.auth.user,
      switchSite: state => state.custom.switch_site
    })
  }
}
</script>
